	<template>
		<view>
			<template v-if="node && Array.isArray(node) && node.length">
				<view v-for="(column, index) in node" :key="index" :label="column.name">
					<view class="flex justify-between padding-bottom-xs">
						<view class="flex align-center">
							<view class="detail-label" :style="{color:colorHandle(column)}">{{column.name}}</view>
							<view class="detail-unit-price">{{column.price}}</view>
						</view>
						<view class="detail-number">{{column.value}}</view>
					</view>
					<my-tree v-if="column.children && Array.isArray(column.children) && column.children.length"
						:node="column.children"></my-tree>
				</view>
			</template>
		</view>
	</template>
	<script>
		export default {
			name: 'myTree',
			props: {
				node: {
					type: [Array],
					required: true
				},
			},
			watch: {
				node: {
					handler(newNode) {
						this.localNode = newNode
					},
					deep: true,
					immediate: true
				}
			},
			data() {
				return {
					localNode: []
				}
			},
			methods: {
				colorHandle(column) {
					if (column.level == 0) {
						return "#2997c5"
					}
					if(column.level == 1){
						return "#025329"
					}
					if(column.level == 2){
						return "#3eb0d5"
					}
					if(column.level == 3){
						return "#000000"
					}
					if(column.value){
						return "black"
					}
				}
			}
		}
	</script>

	<style>
	</style>